<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt=""><span>时</span>
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt=""><span>分</span>
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt=""><span>秒</span>

</body>
<script>
    window.onload = function(){

        var img = document.querySelectorAll("img")
    
        setInterval(function(){
            var data = new Date()
            var res = dataStyle(data);
            img[0].src = "img/"+ parseInt(res.h/10)+".png"
            img[1].src = "img/"+ parseInt(res.h%10)+".png"
            img[2].src = "img/"+ parseInt(res.m/10)+".png"
            img[3].src = "img/"+ parseInt(res.m%10)+".png"
            img[4].src = "img/"+ parseInt(res.s/10)+".png"
            img[5].src = "img/"+ parseInt(res.s%10)+".png"
        },1000)
        function dataStyle(data){  
            var h = data.getHours();
            var m = data.getMinutes();
            var s = data.getSeconds();  
            var obj = {h:h,m:m,s:s}
            return obj
        }
    }
    

</script>
</html>